$(function () {
  ;(function () {
    // 高亮显示切换
    $('.monitor .tabs').on('click', 'a', function () {
      $(this).addClass('active').siblings().removeClass('active')
      //tab栏切换
      $('.monitor .content').eq($(this).index()).show().siblings('.content').hide()
    })

    //将监控区域内容复制一份，便于滚动效果
    $('.marquee-view .marquee').each(function () {
      var rows = $(this).children().clone()
      $(this).append(rows)
    })
  })()

  // 点位分布模块
  ;(function () {
    // 点位分布图统计
    var mycharts = echarts.init(document.querySelector('.pie'))
    var opt = {
      color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: '点位模式',
          type: 'pie',
          radius: ['10%', '70%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 20, name: '云南' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '江苏' },
            { value: 25, name: '浙江' },
            { value: 30, name: '四川' },
            { value: 42, name: '湖北' }
          ],
          label: {
            fontSize: 10
          },
          labelLine: {
            length: 6,
            length2: 8
          }
        }
      ]
    }
    mycharts.setOption(opt)
    // 监听浏览器缩放时，图标不会跟着变化
    window.addEventListener('resize', function () {
      mycharts.resize() //图标调用resize方法，自己重新计算
    })
  })()

  // 用户总量模块
  ;(function () {
    var item = {
      value: 1200,
      // 柱子颜色
      itemStyle: {
        color: '#254065'
      },
      // 鼠标经过柱子颜色
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      },
      // 工具提示隐藏
      tooltip: {
        extraCssText: 'opacity:0'
      }
    }
    // 用户统计模块制作
    var mychart = echarts.init(document.querySelector('.bar'))
    var opt = {
      // 修改线性渐变色方式 1
      color: new echarts.graphic.LinearGradient(
        // (x1,y1) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: '#00fffb' }, // 0 起始颜色
          { offset: 1, color: '#0061ce' } // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: 'item'
      },
      grid: {
        top: '3%',
        right: '3%',
        bottom: '3%',
        left: '0%',
        //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
        containLabel: true,
        // 是否显示直角坐标系网格
        show: true,
        //grid 四条边框的颜色
        borderColor: 'rgba(0, 240, 255, 0.3)'
      },
      // 控制x轴
      xAxis: [
        {
          // 使用类目，必须有data属性
          type: 'category',
          // 使用 data 中的数据设为刻度文字
          data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
          // 刻度设置
          axisTick: {
            // true意思：图形和刻度居中中间
            // false意思：图形在刻度之间
            alignWithLabel: false,
            // 不显示刻度
            show: false
          },
          // x坐标轴文字标签样式设置
          axisLabel: {
            color: '#4c9bfd',
            fontSize: 8
          },
          // x坐标轴颜色设置
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
            }
          }
        }
      ],
      // 控制y轴
      yAxis: [
        {
          // 使用类目，必须有data属性
          type: 'value',
          // 刻度设置
          axisTick: {
            // 不显示刻度
            show: false
          },
          // y坐标轴文字标签样式设置
          axisLabel: {
            color: '#4c9bfd'
          },
          // y坐标轴颜色设置
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
            }
          },
          // y轴 分割线的样式
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 240, 255, 0.3)'
            }
          }
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
        }
      ]
    }
    mychart.setOption(opt)
    // 监听浏览器缩放时，图标不会跟着变化
    window.addEventListener('resize', function () {
      mychart.resize() //图标调用resize方法，自己重新计算
    })
  })()

  //订单量模块
  ;(function () {
    var timer = null
    var n = 0 //控制自动跳转到哪个tab栏
    var data = [
      { order_quantity: '20,301,987', sales: 99834 },
      { order_quantity: '5,005,969', sales: 24616 },
      { order_quantity: '1,668,656', sales: 8205 },
      { order_quantity: '55,621', sales: 273 }
    ]
    $('.order .filter').on('click', 'a', function (i, ele) {
      var index = $(this).index()
      n = index
      $(this).addClass('active').siblings().removeClass()
      $('.quantity').html(data[index].order_quantity)
      $('.order_sales').html(data[index].sales)
    })

    autoPlay()
    $('.order').hover(
      function () {
        clearInterval(timer)
      },
      function () {
        autoPlay()
      }
    )
    function autoPlay() {
      timer = setInterval(function () {
        n++
        if (n >= $('.order .filter a').length) {
          n = 0
        }
        $('.order .filter a').eq(n).click()
      }, 2000)
    }
  })()

  //销售模块
  ;(function () {
    var timer = null //声明一个空对象准备存储定时器
    // 准备数据
    var data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    }
    var mycharts = echarts.init(document.querySelector('.line'))
    var opt = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        textStyle: {
          color: '#4c9bfd' // 图例文字颜色
        },
        right: '10%' // 距离右边10%
        // data: ['邮件营销', '联盟广告']
        //如果series里面对象都有name，那么此时这里可以省略 也会出现该组件
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        show: true, // 显示边框
        borderColor: '#012f4a', // 边框颜色
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          color: '#4c9bfd' // 文本颜色
        },
        axisLine: {
          show: false // 去除轴线
        },
        boundaryGap: false // 去除轴内间距
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false // 去除刻度
        },
        axisLabel: {
          color: '#4c9bfd' // 文字颜色
        },
        splitLine: {
          lineStyle: {
            color: '#012f4a' // 分割线颜色
          }
        }
      },
      color: ['#00f2f1', '#ed3f35'],
      series: [
        {
          name: '预期销售额',
          data: data.year[0],
          type: 'line',
          // 折线修饰为圆滑
          smooth: true
        },
        {
          name: '实际销售额',
          data: data.year[1],
          type: 'line',
          smooth: true
        }
      ]
    }
    mycharts.setOption(opt)

    // 点击caption 里面的 a 切换效果
    $('.sales .caption').on('click', 'a', function () {
      index = $(this).index() - 1 //由于同级有其他标签，jquery索引会把所有的标签都算进去，所以-1
      $(this).addClass('active').siblings('a').removeClass('active')
      // console.log(typeof $(this).data('type'))//string
      var arr = data[$(this).data('type')] //获取到的时字符串类型
      // 以前学过的对象调用方法有 a、对象.属性 b、对象['属性名']
      opt.series[0].data = arr[0]
      opt.series[1].data = arr[1]
      mycharts.setOption(opt)
    })

    // 开启定时器自动切换
    var index = 0
    autoPlay()
    function autoPlay() {
      timer = setInterval(function () {
        index++
        if (index >= 4) {
          index = 0
        }
        $('.sales .caption a').eq(index).click()
      }, 1000)
    }

    $('.sales').on({
      mouseenter: function () {
        clearInterval(timer)
      },
      mouseleave: function () {
        clearInterval(timer)
        autoPlay()
      }
    })
    // 监听浏览器缩放时，图标不会跟着变化
    window.addEventListener('resize', function () {
      mycharts.resize() //图标调用resize方法，自己重新计算
    })
  })()

  // 渠道分布模块
  ;(function () {
    var mychart = echarts.init(document.querySelector('.radar'))

    var opt = {
      tooltip: {
        show: true,
        // 控制提示框组件的显示位置
        position: ['60%', '10%']
      },
      radar: {
        // 雷达图的指示器 内部填充数据
        indicator: [
          { name: '机场', max: 100 },
          { name: '商场', max: 100 },
          { name: '火车站', max: 100 },
          { name: '汽车站', max: 100 },
          { name: '地铁', max: 100 }
        ],
        center: ['50%', '50%'],
        radius: '65%', // 外半径占据容器大小
        shape: 'circle',
        splitNumber: 4, // 指示器轴的分割段数
        name: {
          textStyle: {
            color: '#4c9bfd' // 修饰雷达图文本颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        splitArea: {
          show: false
        },
        axisLine: {
          // 坐标轴轴线相关设置(竖线)axisLine
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        }
      },
      series: [
        {
          name: '北京',
          type: 'radar',
          lineStyle: {
            normal: {
              color: '#fff',
              width: 1,
              opacity: 0.5
            }
          },
          data: [[90, 19, 56, 11, 34]],
          symbol: 'circle', // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
          symbolSize: 5, // 拐点的大小
          itemStyle: {
            color: '#fff'
          },
          // 在圆点上显示相关数据
          label: {
            show: true,
            color: '#fff',
            fontSize: 10
          },
          areaStyle: {
            color: 'rgba(238, 197, 102, 0.6)'
          }
        }
      ]
    }
    mychart.setOption(opt)
    // 监听浏览器缩放时，图标不会跟着变化
    window.addEventListener('resize', function () {
      mychart.resize() //图标调用resize方法，自己重新计算
    })
  })()

  // 渠道进度模块
  ;(function () {
    var mychart = echarts.init(document.querySelector('.gauge'))
    var opt = {
      series: [
        {
          name: '季度销售',
          type: 'pie',
          // 放大图形
          radius: ['130%', '150%'],
          // 移动下位置  套住50%文字
          center: ['48%', '80%'],
          labelLine: {
            show: false
          },
          // 起始角度，支持范围[0, 360]
          startAngle: 180,
          // 鼠标经过不变大
          hoverOffset: 0,
          data: [
            {
              value: 100,
              itemStyle: {
                // 颜色渐变#00c9e0->#005fc1
                color: new echarts.graphic.LinearGradient(
                  // (x1,y1) 点到点 (x2,y2) 之间进行渐变
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: '#00c9e0' }, // 0 起始颜色
                    { offset: 1, color: '#005fc1' } // 1 结束颜色
                  ]
                )
              }
            },
            { value: 100, itemStyle: { color: '#12274d' } },
            { value: 200, itemStyle: { color: 'transparent' } }
          ] // 透明隐藏第三块区域
        }
      ]
    }
    mychart.setOption(opt)
    // 监听浏览器缩放时，图标不会跟着变化
    window.addEventListener('resize', function () {
      mychart.resize() //图标调用resize方法，自己重新计算
    })
  })()

  // 各省热销模块
  ;(function () {
    var hotData = [
      {
        city: '北京', // 城市
        sales: '25, 179', // 销售额
        flag: true, //  上升还是下降
        brands: [
          //  品牌种类数据
          { name: '可爱多', num: '9,086', flag: true },
          { name: '娃哈哈', num: '8,341', flag: true },
          { name: '喜之郎', num: '7,407', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '6,724', flag: false },
          { name: '好多鱼', num: '2,170', flag: true }
        ]
      },
      {
        city: '河北',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '3,457', flag: false },
          { name: '娃哈哈', num: '2,124', flag: true },
          { name: '喜之郎', num: '8,907', flag: false },
          { name: '八喜', num: '6,080', flag: true },
          { name: '小洋人', num: '1,724', flag: false },
          { name: '好多鱼', num: '1,170', flag: false }
        ]
      },
      {
        city: '上海',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '2,345', flag: true },
          { name: '娃哈哈', num: '7,109', flag: true },
          { name: '喜之郎', num: '3,701', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '2,724', flag: false },
          { name: '好多鱼', num: '2,998', flag: true }
        ]
      },
      {
        city: '江苏',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '2,156', flag: false },
          { name: '娃哈哈', num: '2,456', flag: true },
          { name: '喜之郎', num: '9,737', flag: true },
          { name: '八喜', num: '2,080', flag: true },
          { name: '小洋人', num: '8,724', flag: true },
          { name: '好多鱼', num: '1,770', flag: false }
        ]
      },
      {
        city: '山东',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '9,567', flag: true },
          { name: '娃哈哈', num: '2,345', flag: false },
          { name: '喜之郎', num: '9,037', flag: false },
          { name: '八喜', num: '1,080', flag: true },
          { name: '小洋人', num: '4,724', flag: false },
          { name: '好多鱼', num: '9,999', flag: true }
        ]
      }
    ]

    var str = ''
    $.each(hotData, function (i, ele) {
      str += `<li>
      <span>${ele.city}</span>
      <span>${ele.sales}<s class="${ele.flag ? 'icon-up' : 'icon-down'}"></s></span>
    </li>`
    })
    $('.sup').html(str)
    var index = 0 //控制哪个li高亮
    var timer = null //定时器
    // 鼠标扫过省时，高亮切换
    $('.province .sup').on('mouseenter', 'li', function () {
      index = $(this).index()
      render(index)
    })
    autoPlay()
    //默认触发第一个li
    $('.province .sup li').eq(0).mouseenter()

    // 鼠标经过停止，离开恢复
    $('.province .sup').hover(
      function () {
        clearInterval(timer)
      },
      function () {
        autoPlay()
      }
    )

    // 自动播放函数
    function autoPlay() {
      //自动切换
      timer = setInterval(function () {
        index++
        if (index >= hotData.length) {
          index = 0
        }
        render(index)
      }, 1500)
    }

    // 渲染函数
    function render(obj) {
      $('.province .sup li').eq(obj).addClass('active').siblings().removeClass('active')
      var subHtml = ''
      $.each(hotData[obj].brands, function (i, ele) {
        subHtml += `<li><span>${ele.name}</span><span>${ele.num}<s class="icon-${ele.flag ? 'up' : 'down'}"></s></span></li>`
      })
      $('.sub').html(subHtml)
    }
  })()
})
